<template>
    <div id="cesiumContainer" ref="cesiumContainer"></div>
  </template>
  
  <script setup>
  // yarn add cesium
  // 将cesium目录下的Build/Cesium4个目录拷贝到public，然后将widgets目录拷贝一份到src下
  import * as Cesium from "cesium";
  import "./Widgets/widgets.css";
  import { onMounted } from "vue";
  
  // 设置cesium token
  Cesium.Ion.defaultAccessToken =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1ZjJlYTllMy1kYWRiLTQwYjctOGZhOS02NGJkOTJhYTA1ODUiLCJpZCI6MjU5LCJpYXQiOjE3Mjc3OTI2NzB9.XbfI79d1v3T5OpMl4CznrcBuctSfW1lycPWlt8bq_1A";
  
  // 设置cesium静态资源路径
  window.CESIUM_BASE_URL = "/";
  
  // 设置cesium默认视角
  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
    // 西边的经度
    89.5,
    // 南边维度
    20.4,
    // 东边经度
    110.4,
    // 北边维度
    61.2
  );
  
  onMounted(() => {
    var viewer = new Cesium.Viewer("cesiumContainer", {
      infoBox: false,
    });
  
    // 隐藏logo
    viewer.cesiumWidget.creditContainer.style.display = "none";
  
    // 加载kml数据
    let kmlUrl = './Assets/facilities1.kml'
    let kmlDataPromise = Cesium.KmlDataSource.load(kmlUrl, {
      camera: viewer.scene.camera,
      canvas: viewer.scene.canvas,
      screenOverlayContainer: viewer.container,
    })
    console.log(kmlDataPromise);
    kmlDataPromise.then(function (dataSource) {
      console.log(dataSource);
      viewer.dataSources.add(dataSource);
    });
  });
  </script>
  
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  #cesiumContainer {
    width: 100vw;
    height: 100vh;
  }
  </style>
  